/**
 * 会员卡的列表
 * @author: zxy
 * @update: 2016-03-13
 */

import React, {PropTypes} from 'react';
import {Row, Col, Button, Table, Popconfirm, Pagination, Popover,} from 'antd';

function MemberCardList({
  total, pageNumber, pageSize, loading, dataSource,
  onAdd, onPageChange, onShowSizeChange,
  onEditItem, onDeleteItem
}) {

  dataSource = [{
    package_name: '情人节套餐',
    recharge_amount: '800',
    gift_amount: '50',
    discount_type: '8折卡',
    commission: '2000',
    key: 1,
    creat_time: '2016-09-21  08:50:08'
  },{
    package_name: '情人节套餐',
    recharge_amount: '800',
    gift_amount: '50',
    discount_type: '8折卡',
    commission: '200',
    key: 2,
    creat_time: '2016-09-21  08:50:08'
  },{
    package_name: '情人节套餐',
    recharge_amount: '800',
    gift_amount: '50',
    discount_type: '8折卡',
    commission: '200',
    key: 3,
    creat_time: '2016-09-21  08:50:08'
  },{
    package_name: '情人节套餐',
    recharge_amount: '800',
    gift_amount: '50',
    discount_type: '8折卡',
    commission: '200',
    key: 4,
    creat_time: '2016-09-21  08:50:08'
  },{
    package_name: '情人节套餐',
    recharge_amount: '800',
    gift_amount: '50',
    discount_type: '8折卡',
    commission: '20',
    key: 5,
    creat_time: '2016-09-21  08:50:08'
  }];

  const columns = [{
    title: '套餐名称',
    dataIndex: 'package_name',
    key: 'package_name',
    width: 80,
  }, {
    title: '充值金额',
    dataIndex: 'recharge_amount',
    key: 'recharge_amount',
    width: 80,
    sorter: (a, b) => a.recharge_amount - b.recharge_amount,
  }, {
    title: '赠送金额',
    dataIndex: 'gift_amount',
    key: 'gift_amount',
    width: 100,
    sorter: (a, b) => a.gift_amount - b.gift_amount,
  }, {
    title: '折扣类型',
    dataIndex: 'discount_type',
    key: 'discount_type',
    width: 100,
  }, {
    title: '售卡提成',
    dataIndex: 'commission',
    key: 'commission',
    width: 100,
    sorter: (a, b) => a.commission - b.commission,
  }, {
    title: '创建时间',
    dataIndex: 'creat_time',
    key: 'creat_time',
    width: 100,
  }, {
    title: '操作',
    dataIndex: 'ope',
    key: 'ope',
    width: 150,
    render: (text, record) => {
      const editCon = (
        <Col span={6} offset={6}><a onClick={() => onEditItem(record.key)}>编辑</a></Col>
      );
      const deleteCon = (
        <Col span={6}><Popconfirm title="确定要删除吗？" onConfirm={() => onDeleteItem(record.key)}><a>删除</a></Popconfirm></Col>
      );
      return (
        <Row>
          {editCon}
          {deleteCon}
        </Row>)
    }
  }];

  return (
    <div style={{overflow: 'hidden', padding: '30px 0'}}>
      <Table
        columns={columns}
        rowKey={record => record.key}
        dataSource={dataSource}
        loading={loading}
        pagination={false}
        title={
          () =>
            <Row>
              <Col span={18} className="tl"></Col>
              <Col span={6} className="tr"><Button onClick={onAdd} type="primary" icon="plus">添加套餐</Button></Col>
            </Row>
        }
        bordered
      />
      <Pagination
        className="ant-table-pagination"
        total={total}
        showTotal={total => `共 ${total} 条`}
        current={pageNumber}
        showSizeChanger
        showQuickJumper
        pageSize={pageSize}
        onChange={onPageChange}
        onShowSizeChange={onShowSizeChange}
      />
    </div>
  );
}

MemberCardList.propTypes = {
  total: PropTypes.any,
  pageNumber: PropTypes.any,
  loading: PropTypes.any,
  dataSource: PropTypes.array,
  onSelectChange: PropTypes.func,
  onPageChange: PropTypes.func,
  onShowSizeChange: PropTypes.func,
  onEditItem: PropTypes.func,
  onDeleteItem: PropTypes.func,
};

export default MemberCardList;